<template>
  <div class="compromise-content full-height full-width">
    <div class="form-inline" style="width: 100%; padding-left: 0">
      <q-btn class="margin-r-10" outline color="primary" label="批量删除" @click="deleteReason('', 'multiple')" :disable="selectedId.length == 0" />
      <q-btn class="margin-r-10" outline color="primary" label="新增" @click="batchAdd.show = true" />
    </div>
    <q-table
      class="myTable scroll my-sticky-virt scroll-table stick-last-col"
      style="margin: 0"
      virtual-scroll
      :rows-per-page-options="[0]"
      row-key="indexId"
      :pagination.sync="pagination"
      no-data-label="暂无数据"
      selection="multiple"
      :selected.sync="selectedId"
      :hide-bottom="!!tableData.length"
      color="primary"
      :data="tableData"
      :columns="tableColumns"
    >
      <template v-slot:body-cell-indexId="props">
        <q-td style="width: 80px">{{props.row.indexId + 1}}</q-td>
      </template>
      <template v-slot:body-cell-operate="props">
        <q-td style="width: 120px">
          <q-toggle
            v-model="props.row.enable"
            :true-value="true"
            :false-value="false"
            checked-icon="iconfont icontubiao-49"
            unchecked-icon="iconfont icontubiao-48"
            :disable="isStatusToggleDisabled[props.row.id]"
            color="positive"
            @input="onStatusToggle(props.row, $event)"
          >
            <template v-slot>
              <q-tooltip>{{ props.row.enable ? '禁用' : '启用' }}</q-tooltip>
            </template>
          </q-toggle>
          <table-btn btnType="edit" @click="openEditDialog(props.row)"/>
          <table-btn btnType="delete" @click="deleteReason(props.row.id, 'single')"/>
        </q-td>
      </template>
      <template v-slot:header-cell-operate="props">
        <th>
          <div class="flex items-center justify-center">
            <q-toggle
              v-model="enable"
              :true-value="true"
              :false-value="false"
              checked-icon="iconfont icontubiao-49"
              unchecked-icon="iconfont icontubiao-48"
              color="positive"
              @input="onAllStatusToggle"
              v-if="tableData.length > 0"
            >
              <template v-slot>
                <q-tooltip>{{ enable ? '禁用全部' : '启用全部' }}</q-tooltip>
              </template>
            </q-toggle>
            <div>操作</div>
          </div>
        </th>
      </template>
    </q-table>
    <!-- 编辑原因弹出框 -->
    <edit-reason-item
      :typeCode="editReason.typeCode"
      :show="editReason.show"
      :code="editReason.code"
      :label="editReason.label"
      :groupName="null"
      @editReason="editReasonItem"
      @close="editReason.show = false"
    />
    <!-- 批量新增 -->
    <batch-add-reason
      :show="batchAdd.show"
      :groupName="null"
      @batchAddReason="batchAddReason"
      @close="batchAdd.show = false"
    />
  </div>
</template>

<script>
import editReasonItem from './edit-reason-item'
import batchAddReason from './batch-add-reason'
import {
  getCauseItem,
  delCause,
  addCauseItem,
  editCauseItem,
  changeCauseEnable,
  getCauseTypeList } from 'src/boot/system/reason'
export default {
  name: 'compromise-content',
  components: {
    editReasonItem,
    batchAddReason
  },
  data () {
    return {
      selectedId: [], // 选中原因
      // 原因编辑弹出框
      editReason: {
        show: false,
        code: null,
        label: null
      },
      isStatusToggleDisabled: {}, // 避免用户操作过快
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 表格头部数据
      tableColumns: [
        { name: 'indexId', label: '序号', field: 'indexId', align: 'left' },
        { name: 'code', label: '原因代码', field: 'code', align: 'left' },
        { name: 'label', label: '原因', field: 'label', align: 'left' },
        { name: 'operate', label: '操作', field: 'operate', align: 'center' }
      ],
      // 表格数据
      tableData: [],
      // 批量增加原因
      batchAdd: {
        show: false
      },
      // 所选原因id
      selId: null,
      // 让步原因类型
      typeId: null,
      enable: false
    }
  },
  watch: {
    tableData: {
      immediate: true,
      handler: function (val) {
        this.enable = !val.every(item => item.enable === false)
      }
    }
  },
  methods: {
    // 切换字典项禁用/启用状态
    onStatusToggle: function (val, status) {
      // status ? status = 1 : status = 0
      this.$set(this.isStatusToggleDisabled, val.id, true)
      const params = {
        enable: status,
        id: val.id,
        causeGroupId: this.typeId,
        type: 'compromise'
      }
      changeCauseEnable(params).then(res => {
        if (res.code === 1200) {
          this.$set(this.isStatusToggleDisabled, val.id, status)
        }
      }).finally(() => {
        this.$set(this.isStatusToggleDisabled, val.id, false)
      })
    },
    // 获取原因类型
    getCauseList () {
      getCauseTypeList(2).then(res => {
        this.typeId = res.data[0].id
        this.getList()
      })
    },
    // 获取原因表格数据
    getList () {
      const params = {
        causeGroupId: this.typeId,
        showDisable: true
      }
      getCauseItem(params).then(res => {
        if (res.data.length > 0) {
          this.selectedId = []
          res.data.forEach((row, index) => {
            row.indexId = index
          })
        }
        this.tableData = res.data
      })
    },
    // 删除原因
    deleteReason (id, type) {
      console.log(id)
      let params = {
        id: []
      }
      if (type === 'multiple') {
        this.selectedId.forEach(i => {
          params.id.push(i.id)
        })
      } else if (type === 'single') {
        params.id.push(id)
      }
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>确认删除所选原因？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      })
        .onOk(() => {
          delCause(params).then(res => {
            if (res.code === '1200') {
              this.editReason.show = false
              this.getList()
              this.$message.success('删除成功')
            }
          })
        })
    },
    // 单行编辑
    openEditDialog (item) {
      console.log(item)
      this.editReason.show = true
      this.editReason.code = item.code
      this.editReason.label = item.label
      this.selId = item.id
    },
    // 编辑原因
    editReasonItem (item) {
      console.log(item)
      const params = {
        ...item,
        gid: this.typeId,
        id: this.selId
      }
      editCauseItem(params).then(res => {
        if (res.code === '1200') {
          this.editReason.show = false
          this.getList()
          this.$message.success('编辑成功')
        }
      })
    },
    // 批量新增
    batchAddReason (params) {
      params.forEach(item => {
        item.gid = this.typeId
        item.causeType = 2
      })
      // console.log(params, 1111)
      addCauseItem(params).then(res => {
        if (res.code === '1200') {
          this.batchAdd.show = false
          this.getList()
          this.$message.success('批量新增原因成功')
        }
      })
    },
    onAllStatusToggle () {
      const ids = this.tableData.map(item => item.id)
      const params = {
        enable: this.enable,
        id: ids
      }
      this.$q.loading.show()
      changeCauseEnable(params).then(res => {
        if (res.code === '1200') {
          this.tableData.forEach(item => {
            item.enable = this.enable
          })
        }
      }).finally(() => {
        this.$q.loading.hide()
      })
    }
  },
  created () {
    this.getCauseList()
  }
}
</script>

<style scoped>

</style>
